<template>
		<div>
				<el-dialog @open="beforeShowDialog" :title="addOrUpdate ? '添加': '修改'" :visible.sync="dialogFormVisible" width="70%"
															:before-close="hiddenDialog">
						<el-form :model="EmpInfoForm" label-width="110px" ref="empFormRef" status-icon :rules="EmpInfoFormRules">
								<el-row :gutter="50">
										<el-col :span="6">
												<el-form-item label="姓名" prop="name">
														<el-input v-model="EmpInfoForm.name" size="small" prefix-icon="el-icon-edit" :clearable="true"></el-input>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="性别" prop="gender">
														<el-radio v-model="EmpInfoForm.gender" label="男" size="small">男</el-radio>
														<el-radio v-model="EmpInfoForm.gender" label="女" size="small">女</el-radio>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="出生日期" prop="birthday">
														<el-date-picker
																		style="width: 100%;"
																		size="small"
																		v-model="EmpInfoForm.birthday"
																		type="date"
																		:clearable="true"
																		value-format="yyyy-MM-dd"
																		placeholder="选择日期">
														</el-date-picker>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="政治面貌" prop="politicId">
														<el-select v-model="EmpInfoForm.politicId" size="small" :clearable="true">
																<el-option v-for="(politics,index) in PoliticsStatusData" :label="politics.name"
																											:value="politics.id" :key="index"></el-option>
														</el-select>
												</el-form-item>
										</el-col>
								</el-row>
								<el-row :gutter="50">
										<el-col :span="6">
												<el-form-item label="民族" prop="nationId">
														<el-select v-model="EmpInfoForm.nationId" size="small" :clearable="true">
																<el-option v-for="(nation,index) in nationData" :key="index" :label="nation.name"
																											:value="nation.id"></el-option>
														</el-select>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="籍贯" prop="nativePlace">
														<el-input size="small" v-model="EmpInfoForm.nativePlace" :clearable="true"
																								prefix-icon="el-icon-edit"></el-input>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="电子邮箱" prop="email">
														<el-input size="small" v-model="EmpInfoForm.email" prefix-icon="el-icon-edit"
																								:clearable="true"></el-input>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="联系地址" prop="address">
														<el-input size="small" v-model="EmpInfoForm.address" prefix-icon="el-icon-edit"
																								:clearable="true"></el-input>
												</el-form-item>
										</el-col>
								</el-row>
								<el-row :gutter="50">
										<el-col :span="6">
												<el-form-item label="职位" prop="posId">
														<el-select v-model="EmpInfoForm.posId" size="small" :clearable="true">
																<el-option v-for="(position,index) in PositionData" :label="position.name" :value="position.id"
																											:key="index"></el-option>
														</el-select>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="职称" prop="jobLevelId">
														<el-select v-model="EmpInfoForm.jobLevelId" size="small" :clearable="true">
																<el-option v-for="(jobLevel,index) in JobLevelData" :value="jobLevel.id"
																											:label="jobLevel.name" :key="index"></el-option>
														</el-select>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="所属部门" prop="departmentId">
														<el-select v-model="EmpInfoForm.departmentId" :clearable="true" size="small">
																<el-option v-for="(dept,index) in DepartmentsData" :label="dept.name" :value="dept.id"
																											:key="dept.index"></el-option>
														</el-select>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="电话号码" prop="phone">
														<el-input size="small" v-model="EmpInfoForm.phone" prefix-icon="el-icon-phone"
																								:clearable="true"></el-input>
												</el-form-item>
										</el-col>
								</el-row>
								<el-row :gutter="50">
										<el-col :span="6">
												<el-form-item label="工号">
														<el-input size="small" :disabled="true" v-model="EmpInfoForm.workID" :clearable="true"></el-input>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="学历" prop="tiptopDegree">
														<el-select v-model="EmpInfoForm.tiptopDegree" size="small" :clearable="true">
																<el-option v-for="(item,index) in tiptopDegrees" :label="item" :value="item" :key="index"></el-option>
														</el-select>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="毕业院校" prop="school">
														<el-input size="small" v-model="EmpInfoForm.school" prefix-icon="el-icon-edit"
																								:clearable="true"></el-input>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="专业名称" prop="specialty">
														<el-input size="small" v-model="EmpInfoForm.specialty" prefix-icon="el-icon-edit"
																								:clearable="true"></el-input>
												</el-form-item>
										</el-col>
								</el-row>
								<el-row :gutter="50">
										<el-col :span="6">
												<el-form-item label="入职日期" prop="beginDate">
														<el-date-picker
																		style="width: 100%;"
																		size="small"
																		v-model="EmpInfoForm.beginDate"
																		type="date"
																		value-format="yyyy-MM-dd"
																		placeholder="选择日期"
																		:clearable="true"
																		:picker-options="pickerOptions">
														</el-date-picker>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="转正日期" prop="conversionTime">
														<el-date-picker
																		style="width: 100%;"
																		size="small"
																		v-model="EmpInfoForm.conversionTime"
																		type="date"
																		:clearable="true"
																		value-format="yyyy-MM-dd"
																		placeholder="选择日期">
														</el-date-picker>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="合同起始日期" prop="beginContract">
														<el-date-picker
																		style="width: 100%;"
																		size="small"
																		v-model="EmpInfoForm.beginContract"
																		type="date"
																		:clearable="true"
																		value-format="yyyy-MM-dd"
																		placeholder="选择日期">
														</el-date-picker>
												</el-form-item>
										</el-col>
										<el-col :span="6">
												<el-form-item label="合同终止日期" prop="endContract">
														<el-date-picker
																		style="width: 100%;"
																		size="small"
																		v-model="EmpInfoForm.endContract"
																		type="date"
																		:clearable="true"
																		value-format="yyyy-MM-dd"
																		placeholder="选择日期">
														</el-date-picker>
												</el-form-item>
										</el-col>
								</el-row>
								<el-row :gutter="50">
										<el-col :span="7">
												<el-form-item label="身份证号" prop="idCard">
														<el-input size="small" v-model="EmpInfoForm.idCard" prefix-icon="el-icon-edit"
																								:clearable="true"></el-input>
												</el-form-item>
										</el-col>
										<el-col :span="7">
												<el-form-item label="聘用形式" prop="engageForm">
														<el-radio v-model="EmpInfoForm.engageForm" label="劳动合同" size="small">劳动合同</el-radio>
														<el-radio v-model="EmpInfoForm.engageForm" label="劳务合同" size="small">劳务合同</el-radio>
												</el-form-item>
										</el-col>
										<el-col :span="9">
												<el-form-item label="婚姻状况" prop="wedlock">
														<el-radio v-model="EmpInfoForm.wedlock" label="已婚" size="small">已婚</el-radio>
														<el-radio v-model="EmpInfoForm.wedlock" label="未婚" size="small">未婚</el-radio>
														<el-radio v-model="EmpInfoForm.wedlock" label="离异" size="small">离异</el-radio>
												</el-form-item>
										</el-col>
								</el-row>
						</el-form>
						<div slot="footer" class="dialog-footer">
								<el-button @click="hiddenDialog" size="small">取 消</el-button>
								<el-button type="primary" @click="submitClick" size="small">确 定</el-button>
						</div>
				</el-dialog>
		</div>
</template>

<script>
export default {
		name: "EmpBasicAddOrUpdate",
		data() {
				return {
						tiptopDegrees: ['本科', '大专', '硕士', '博士', '高中', '初中', '小学', '其他'],
						dialogFormVisible: false,
						addOrUpdate: true,
						EmpInfoForm: {
								'name': '',
								'gender': '男',
								'birthday': '',
								'politicId': '',
								'nationId': '',
								'nativePlace': '',
								'email': '',
								'address': '',
								'posId': '',
								'jobLevelId': '',
								'departmentId': '',
								'phone': '',
								'workID': '',
								'tiptopDegree': '',
								'school': '',
								'specialty': '',
								'beginDate': '',
								'conversionTime': '',
								'beginContract': '',
								'endContract': '',
								'idCard': '',
								'engageForm': '劳动合同',
								'wedlock': '未婚',
								'contractTerm': '2',
						},
						EmpInfoFormRules: {
								name: [
										{required: true, message: '请输入员工姓名', trigger: 'blur'},
										{min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
								],
								birthday: [{required: true, message: '请选择生日', trigger: 'blur'}],
								politicId: [{required: true, message: '请选择政治面貌', trigger: 'change'}],
								nationId: [{required: true, message: '请选择名族', trigger: 'change'}],
								nativePlace: [{required: true, message: '请选择名族', trigger: 'blur'}],
								email: [{required: true, message: '请输入邮箱', trigger: 'blur'},
										{
												pattern: /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,
												message: '请输入正确的邮箱格式'
										}
								],
								address: [{required: true, message: '请输入地址', trigger: 'blur'}],
								posId: [{required: true, message: '请选择职位', trigger: 'change'}],
								jobLevelId: [{required: true, message: '请选择职称', trigger: 'change'}],
								departmentId: [{required: true, message: '请选择部门', trigger: 'change'}],
								phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}, {
										pattern: /^1[34578]\d{9}$/,
										message: '目前只支持中国大陆的手机号码'
								}],
								tiptopDegree: [{required: true, message: '请选择学历', trigger: 'change'}],
								school: [{required: true, message: '请选择学历', trigger: 'blur'}],
								specialty: [{required: true, message: '请输入专业名称', trigger: 'blur'}],
								beginDate: [{required: true, message: '请选择入职日期', trigger: 'blur'}],
								conversionTime: [{required: true, message: '请选择转正日期', trigger: 'blur'}],
								beginContract: [{required: true, message: '请选择合同开始日期', trigger: 'blur'}],
								endContract: [{required: true, message: '请选择合同终止日期', trigger: 'blur'}],
								idCard: [{required: true, message: '请输入身份证号码', trigger: 'blur'}],
						},
						pickerOptions: {
								disabledDate(time) {
										return time.getTime() > Date.now();
								}
								,
						},
						nationData: [],
						PoliticsStatusData: [],
						JobLevelData: [],
						PositionData: [],
						DepartmentsData: [],

				}
		},
		mounted() {
				this.initSelectedData()
		},
		methods: {
				initSelectedData() {
						this.$get("/emp/basic/listAllNations").then(res => {
								const {data} = res;
								this.nationData = data;
						})
						this.$get("/emp/basic/listAllPoliticsStatus").then(res => {
								const {data} = res;
								this.PoliticsStatusData = data;
						})
						this.$get("/emp/basic/listAllJobLevels").then(res => {
								const {data} = res;
								this.JobLevelData = data;
						})
						this.$get("/emp/basic/listAllPositions").then(res => {
								const {data} = res;
								this.PositionData = data;
						})
						this.$get("/emp/basic/listAllDepartments").then(res => {
								const {data} = res;
								this.DepartmentsData = data;
						})
				},
				// 展示弹窗事件
				showDialog(addOrUpdate) {
						this.dialogFormVisible = true;
						// true 添加
						// false 修改
						this.addOrUpdate = addOrUpdate;
				},

				beforeShowDialog() {
						if (this.addOrUpdate) {
								this.getMaxWorkID()
						}
				},
				// 获取最新的工号
				getMaxWorkID() {
						this.$get('/emp/basic/getMaxWorkId').then(res => {
								const {data} = res;
								this.EmpInfoForm.workID = data;
						})
				},

				// 隐藏弹窗事件
				hiddenDialog() {
						this.$refs.empFormRef.resetFields();
						this.dialogFormVisible = false;
				},

				submitClick() {
						if (this.addOrUpdate) {
								this.saveEmp()
						} else {
								this.updateEmp()
						}
				},
				// 添加员工
				saveEmp() {
						this.$refs.empFormRef.validate((valid) => {
								if (valid) {
										this.$post("/emp/basic/saveEmp", this.EmpInfoForm).then(res => {
												const {code} = res;
												if (code === 200) {
														this.hiddenDialog()
														this.$emit('refreshEmpTable')
												}
										})
								}
						})
				},

				// 加载员工信息 - 父组件向子组件传递员工信息
				loadEmpInfo(empInfo) {
						this.EmpInfoForm = {...empInfo}
				},

				updateEmp() {
						this.$refs.empFormRef.validate((valid) => {
								if (valid) {
										this.$put("/emp/basic/updateEmp", this.EmpInfoForm).then(res => {
												const {code} = res;
												if (code === 200) {
														this.hiddenDialog()
														this.$emit('refreshEmpTable')
												}
										})
								}
						})
				}
		},
}
</script>

<style scoped>

</style>
